<template>
  <div class="coupon-wrap">
    <Title arrowType="'round'" url="/productGoods/goodsList?tag=hot">
      <template #title>
        <h1 class="title">
          <span class="title-end">{{$t('热门')}}</span>
        </h1>
      </template>
    </Title>
    <div>
      <ul class="coupon-items">
        <li
          class="coupon-items-li"
          v-for="(item, i) in goodsList"
          :key="`coupon-${i}`"
          @click="goGoodsDeatil(item.id)"
        >
          <img :src="item.thumb_url" class="coupon-items-li-coverImg" />
          <p class="coupon-items-li-intro">{{ item.goods_name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Title from "../Title";
import {goGoodsDeatil} from "@/common/utils"
export default {
  name: "Hot",
  props:{
    goodsList: {
    type:Array,
    default:()=>[],
    required:true
  }
  },
  components: {
    Title,
  },
  methods: {
    goGoodsDeatil
  }
};
</script>
<style lang="scss" scoped>
@import "@/common/style/common.scss";
.coupon {
  &-wrap {
    @extend .common-wrap;
    padding: 10px 20px 0;
    height: 350px;
  }
  &-items {
    &-li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      margin-bottom: 8px;
      cursor: pointer;
      &-intro {
        @include lineClamp(2);
        margin-left: 14px;
        font-weight: 500;
      }
      &-bottom {
        padding: 10px 5px 20px;
        &-title {
          margin-bottom: 6px;
        }
      }
      &-coverImg {
        width: 65px;
        height: 65px;
      }
    }
  }
}
.title {
  font-size: 0;
  & > span {
    font-size: 24px;
    font-weight: 800;
  }
  &-front {
    color: #333;
  }
  &-end {
    color: #e2231a;
  }
}
</style>
